<template>
    <div class="singer" ref='singer'>
    <list-view :data="singers" @select="selectSinger" ref='list'>
    </list-view>
    <router-view></router-view>
    </div>
</template>

<script type="text/ecmascript-6">
import {getSingerList} from 'api/singer'
import {ERR_OK} from 'api/config'
import Singer from 'common/js/singer'
import ListView from 'base/listview/listview'
import {mapMutations} from 'vuex';
import {playlistMixin} from 'common/js/mixin'

const HOT_NAME='热门';
const HOT_SINGER_LEN = 10;
export default{
  name:'',
    mixins: [playlistMixin],
  data(){
  	return{
  	singers:[]
  }},
  created(){
  	this._getSingerList()
  },
  methods:{
        handlePlaylist(playlist){
      const bottom=playlist.length>0?'60px':'';
      this.$refs.singer.style.bottom=bottom;
      this.$refs.list.refresh()
    },
    selectSinger(singer){
      this.$router.push({
        path:`/singer/${singer.id}`
      });
      this.setSinger(singer)
    },
  	_getSingerList(){
  		getSingerList().then((res)=>{
  			if(res.code===ERR_OK){
  				this.singers =this._dealData(res.data.list)
  			}
  		})
		},
		// 处理数据,hot+字母标签,
		// 用构造函数new Singer() 创建实例,不用直接用对象
  	_dealData(list){
  		let map={
  			hot:{
  				title:HOT_NAME,
  				items:[]
  			}
  		};
  		list.forEach((item,index)=>{
  			if(index<HOT_SINGER_LEN){
  				map.hot.items.push(new Singer({
  				 id: item.Fsinger_mid,
               name: item.Fsinger_name
  				}))
  			}
  			const key=item.Findex;
  		if(!map[key]){
  			map[key]={
  				title:key,
  				items:[]
  			}
  		}
  		map[key].items.push(new Singer({
  			id: item.Fsinger_mid,
            name: item.Fsinger_name
  		}))
  		});
	// 热门和字母分别存开
  		let hot=[],ret=[];
  		for(let key in map){
  			let val=map[key];
  			if(val.title.match(/[a-zA-Z]/)){
  				ret.push(val)
  			}else if(val.title===HOT_NAME){
  				hot.push(val)
  			}
			}
		// 字母根据item的title的Unicode编码排序
  		ret.sort((a,b)=>{
  			return a.title.charCodeAt(0)-b.title.charCodeAt(0)
  		})
  		return hot.concat(ret)
  	},
    ...mapMutations({
      setSinger:'SET_SINGER'
    }),
  },
  components:{
  	ListView
  }
}
</script>

<style rel="stylesheet" lang="less">
  .singer{
    position: fixed;
    width: 100%;
    top: 88px;
    bottom: 0;
}

</style>
